<template>
  <div class="PageHeader">
    <img class="logo" src="../images/Logo.png" alt="">
    <el-menu
      class="el-menu-vertical-demo"
      @select="handleSelect"
      background-color="#f5f7f8"
      text-color="#1d2127"
      router=true
      active-text-color="#15c5ce">
      <el-menu-item index="n">
        <i class="el-icon-menu"></i>
        <span slot="title">主页</span>
      </el-menu-item>
       <el-submenu index="HomePage">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>帖子分类</span>
        </template>
          <el-menu-item index="杂谈">杂谈</el-menu-item>
          <el-menu-item index="生活">生活</el-menu-item>
          <el-menu-item index="游戏">游戏</el-menu-item>
          <el-menu-item index="动画">动画</el-menu-item>
          <el-menu-item index="技术">技术</el-menu-item>
          <el-menu-item index="虚拟偶像">虚拟偶像</el-menu-item>
      </el-submenu>
      <el-menu-item index="UserZone">
        <i class="el-icon-user-solid"></i>
        <span slot="title">个人主页</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "PageHeader",
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1'
    };
  },
  methods: {
  //   handleSelect(key) {
  //     if(key=='HomePage'){
  //       window.location.href="http://localhost:8080/HomePage/n";
  //     }
  //     if(key=='杂谈'){
  //       window.location.href="http://localhost:8080/HomePage/杂谈";
  //     }
  //     if(key=='生活'){
  //       window.location.href="http://localhost:8080/HomePage/生活";
  //     }
  //     if(key=='游戏'){
  //       window.location.href="http://localhost:8080/HomePage/游戏";
  //     }
  //     if(key=='动画'){
  //       window.location.href="http://localhost:8080/HomePage/动画";
  //     }
  //     if(key=='技术'){
  //       window.location.href="http://localhost:8080/HomePage/技术";
  //     }
  //     if(key=='虚拟偶像'){
  //       window.location.href="http://localhost:8080/HomePage/虚拟偶像";
  //     }
  //   }
  }
  
}
</script>

<style scoped>
.PageHeader{
  padding-right: 0px;
}
.logo {
  width: 200px;
  height: auto;
}
</style>
